<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script src="spellcheck_test.js"></script>

<script>
  spellcheck_test(
    '<div contenteditable>|zz. I have a issue.</div>',
    '',
    '<div contenteditable>#zz#. I have ~a~ issue.</div>',
    {
      title: '1) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('div').removeAttribute('contenteditable'),
        '<div>zz. I have a issue.</div>',
        'Removing "contenteditable" attribute removes spelling markers.')
    });

  spellcheck_test(
    '<div contenteditable>|zz. I have a issue.</div>',
    '',
    '<div contenteditable>#zz#. I have ~a~ issue.</div>',
    {
      title: '2) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('div').setAttribute('contenteditable', 'false'),
        '<div contenteditable="false">zz. I have a issue.</div>',
        'Setting "contenteditable" attribute to "false" removes spelling markers.')
    });

  spellcheck_test(
    '<div contenteditable id="parent">zz.<div>|zz.</div>zz.</div>',
    '',
    '<div contenteditable id="parent">#zz#.<div>#zz#.</div>#zz#.</div>',
    {
      title: '3) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.getElementById('parent').removeAttribute('contenteditable'),
        '<div id="parent">zz.<div>zz.</div>zz.</div>',
        'Removing "contenteditable" attribute from parent removes spelling markers.')
    });

  spellcheck_test(
    '<div contenteditable id="parent">zz.<div>|zz.</div>zz.</div>',
    '',
    '<div contenteditable id="parent">#zz#.<div>#zz#.</div>#zz#.</div>',
    {
      title: '4) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.getElementById('parent').setAttribute('contenteditable', 'false'),
        '<div contenteditable="false" id="parent">zz.<div>zz.</div>zz.</div>',
        'Setting "contenteditable" attribute to "false" on parent removes spelling markers.')
    });

  spellcheck_test(
    '<div contenteditable>zz.<div id="child">|zz.</div>zz.</div>',
    '',
    '<div contenteditable>#zz#.<div id="child">#zz#.</div>#zz#.</div>',
    {
      title: '5) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.getElementById('child').setAttribute('contenteditable', 'false'),
        '<div contenteditable>#zz#.<div contenteditable="false" id="child">zz.</div>#zz#.</div>',
        'Setting "contenteditable" attribute to "false" on child removes spelling markers.')
    });

  spellcheck_test(
    '<div contenteditable id="parent">zz.<div contenteditable>|zz.</div>zz.</div>',
    '',
    '<div contenteditable id="parent">#zz#.<div contenteditable>#zz#.</div>#zz#.</div>',
    {
      title: '6) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.getElementById('parent').removeAttribute('contenteditable'),
        '<div id="parent">zz.<div contenteditable>#zz#.</div>zz.</div>',
        'Removing "contenteditable" attribute on parent still keeps the spelling markers on child.')
    });

  spellcheck_test(
    '<div contenteditable>zz.<div contenteditable id="child">|zz.</div>zz.</div>',
    '',
    '<div contenteditable>#zz#.<div contenteditable id="child">#zz#.</div>#zz#.</div>',
    {
      title: '7) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.getElementById('child').removeAttribute('contenteditable'),
        '<div contenteditable>#zz#.<div id="child">#zz#.</div>#zz#.</div>',
        'Removing "contenteditable" attribute on child still keeps the spelling markers.')
    });

  spellcheck_test(
    '<textarea>|zz. I have a issue.</textarea>',
    '',
    '<textarea>#zz#. I have ~a~ issue.</textarea>',
    {
      title: '8) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('textarea').setAttribute('readonly', ''),
        '<textarea readonly>zz. I have a issue.</textarea>',
        'Setting "readonly" attribute removes spelling markers.')
    });

  spellcheck_test(
    '<textarea>|zz. I have a issue.</textarea>',
    '',
    '<textarea>#zz#. I have ~a~ issue.</textarea>',
    {
      title: '9) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('textarea').setAttribute('disabled', ''),
        '<textarea disabled>zz. I have a issue.</textarea>',
        'Setting "disabled" attribute removes spelling markers.')
    });

    spellcheck_test(
    '<div contenteditable>|zz. I have a issue.</div>',
    '',
    '<div contenteditable>#zz#. I have ~a~ issue.</div>',
    {
      title: '10) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('div').setAttribute('spellcheck', 'false'),
        '<div contenteditable spellcheck="false">zz. I have a issue.</div>',
        'Setting "spellcheck" attribute to "false" removes spelling markers.')
    });

    spellcheck_test(
    '<textarea>|zz. I have a issue.</textarea>',
    '',
    '<textarea>#zz#. I have ~a~ issue.</textarea>',
    {
      title: '11) Setup for the initial markers.',
      callback: sample => spellcheck_test(
        sample,
        document => document.querySelector('textarea').setAttribute('spellcheck', 'false'),
        '<textarea spellcheck="false">zz. I have a issue.</textarea>',
        'Setting "spellcheck" attribute to "false" removes spelling markers for textarea.')
    });
</script>
